import './style.css'
import '@mdi/font/css/materialdesignicons.css'

import { createApp } from 'vue'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import 'vuetify/styles'

import App from './App.vue'
import router from './router'

const vuetify = createVuetify({
  components,
  directives,
  theme: {
    defaultTheme: 'light',
    themes: {
      light: {
        colors: {
          primary: '#6366f1',
          secondary: '#9333ea',
          background: '#ffffff',
          surface: '#ffffff',
          'on-surface': '#1a202c',
        },
      },
      dark: {
        colors: {
          primary: '#818cf8',
          secondary: '#a855f7',
          background: '#1a1b26',
          surface: '#1a1b26',
          'on-surface': '#e2e8f0',
        },
      },
    },
  },
})

const app = createApp(App)

// 先注册插件
app.use(vuetify)
app.use(router)

// 创建一个全局状态来存储主题切换函数
let themeToggleCallback: (() => void) | null = null

// 提供主题切换函数的注册方法
app.provide('registerThemeToggle', (callback: () => void) => {
  themeToggleCallback = callback
})

// 提供主题切换函数
app.provide('toggleTheme', () => {
  if (themeToggleCallback) {
    themeToggleCallback()
  }
})

// 最后挂载应用
app.mount('#app')
